import { styled } from 'linaria/react'

// 高阶组件border
const border = component => {
  return styled(component) `
    position: relative;

    &::after {
      // 用以解决边框layer遮盖内容
      pointer-events: none;

      position: absolute;
      content: '';
      border-width: ${props => props.borderWidth || 0};
      border-color: ${props => props.borderColor || '#ccc'};
      border-style: ${props => props.borderStyle || 'solid'};
      border-radius: ${props => props.borderRadius || 0};
      left: 0;
      top: 0;
      z-index: 999;

      // 判断出浏览器的DPR
      @media screen and (-webkit-max-device-pixel-ratio: 1.49) {
        width: 100%;
        height: 100%;
      }

      @media screen and (-webkit-max-device-pixel-ratio: 1.5), (-webkit-max-device-pixel-ratio: 2.49) {
        width: 200%;
        height: 200%;
        transform: scale(0.5);
      }

      @media screen and (-webkit-min-device-pixel-ratio: 2.5) {
        width: 300%;
        height: 300%;
        transform: scale(0.3333333);
      }

      transform-origin: 0 0;
    }
  `
}

export default border